<template>
  <div>
    <!--  图标区域 --> 


    <!--  搜索区域 -->
    <el-input v-model="search" placeholder="" class="input-with-select" @keyup.enter.native="doSearch()"> 
      <template #prepend>
        <el-button :icon="Search" @click="operateUI({},'add')">新增</el-button>
      </template>
      <template #append>
        <el-button :icon="Search" @click="clearSearch()">清理</el-button>
      </template>
    </el-input>
    <!--  搜索历史区域 -->

    <!--  列表区域 -->
    <view class="list"> 
      <el-card class="box-card" v-for="(each, index) in compose" :key="index" >
        <template #header>
          <div class="card-header">
            <span>{{ each.search }}</span>
             <el-icon :size="20" color="red" @click="delSearch(each)">
             <Delete />
          </el-icon>
          </div>
        </template>
        <div class="between" v-for="(item,index) in each.list" :key="index">
          <div>
            <el-tooltip class="box-item" effect="dark" :content="item.desc">
            <span> <span class="title-span"> {{ item.desc.substr(0,6) }} </span>  <span @click="open(item)">| {{ item.url.substr(0,50) }} </span></span>
          </el-tooltip>
          </div>
          <div class="flex" >
              <el-icon :size="20" color="#07A2FF">
            <CopyDocument />
          </el-icon>
          <el-icon :size="20" color="#5DCE69" @click="operateUI(item,'update')">
            <Edit />
          </el-icon>
           <el-icon :size="20" color="red" @click="operateUI(item,'del')">
            <Delete />
          </el-icon>
          </div>
        </div>
      </el-card>
    </view>
    <!--  编辑弹框 -->

    <el-dialog v-model="showModal" :title="renderTitle()">
      <el-form>
        <div class="tip" style="margin: 0 0 20px 0">{{ renderTip() }}</div>
        <el-form-item label="链接:">
          <el-input v-model="item.url" autocomplete="off"  :readonly="type=='del'" />
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="item.desc" :autosize="{ minRows: 2 }" type="textarea" :readonly="type=='del'"  @keyup.enter.native="operateData()" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showModal = false">取消</el-button>
          <el-button type="primary" @click="operateData()"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>

import service from "../../common/api.js";
var res;

console.log(service);
export default {
  data() {
    return {
      item: {},
      list: [],
      search: "",
      searchList: [],

      
      showModal: false,
      type: "",

      emnpty:[],
      compose:[],
    };
  },
  created() {
    Object.assign(this, { service }); // 一般很少这样操作
    this.getData();
  },
  methods: {
    async getData() {
      
      res = await this.service.getItems({});
      this.list = res.data;
      res = await this.service.getSearchs({}); 
      this.searchList =  res.data;
      var compose = []
      var map ={}
      var tmp = this.searchList
      if(this.search){
          this.searchList.unshift(this.search)
      }
      tmp.map(s=>{
          map[s] =[]
          this.list.map(e=>{
             if(e.desc.includes(s))  map[s].push(e)
          })
      })
      var emnpty = []
      for(var search in map){ 
          if(map[search].length){
            compose.push({ search,  list:map[search] })
          }else{
             emnpty.push(search) 
          } 
      } 

      this.emnpty = emnpty
      this.compose = compose.filter(e=>e.list.length)
      console.log(compose)
      this.search = ''
      
    },

    async doSearch() {
        console.log(this.search)
        var { search } = this;
         if(!search.trim()) return  
         res = await this.service.syncSearch({ search });
         this.getData()
    },
    async delSearch(search){
         res = await this.service.delSearch({ search });
         this.getData()
    },
    async clearSearch(){
         if(!this.emnpty.length) return
         this.emnpty.map(search =>{
            this.service.delSearch({ search });
         }) 
         this.$message.success("清理完成");
    },

    async operateData() {
      var { desc, url } = this.item;
      if (this.type == "del") { 
        res = await this.service.delItem({});
      } else {
        if(!desc.trim() || !url.trim() ) return  this.$message.error("描述或者链接不能为空");
        res = await this.service.syncItem(this.item);
      }
      this.showModal = false;
      this.$message.success("操作成功");
      this.getData()
    },

    async operateUI(item,type) {
      this.item = item
      this.type = type;
      this.showModal = true;
      console.log(this.item)
    },
    open({ url }){
       window.open(url)
    },
    renderTitle() {
      var map = {
        add: "新收藏一个链接",
        update: "修改链接",
        del: "删除链接",
      };
      return map[this.type];
    },
    renderTip() {
      var map = {
        add: "描述与链接必填,描述词尽可能丰富哦。",
        update: "描述与链接必填,描述词尽可能丰富哦。",
        del: "确定要删除本链接？",
      };
      return map[this.type];
    },
  },
  beforeRouteLeave(){
     service.post("/link/api/save",{}) 
  },
};
/*
后端json 文档存的数据
1. 数据列表[] 
2. 搜索历史[]

操作的接口
数据 crud 
搜索 crd
*/
</script>
<style scoped>
 .flex{
   display: flex;
   align-items: center;
 }
 .between{
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .box-card{
   margin: 10px;

   width: 600px;
 }
 .title-span{
   width: 70px;
   display: inline-block;
 }

 .list{
   height: 90vh;
   overflow: auto;
   cursor: pointer;
   display: flex;
   flex-wrap: wrap;

 }

 ::-webkit-scrollbar{
   display: none;
 }
 .el-card__header{
   padding:2px 10px;
 }
 .el-card__body{
  padding:5px 10px;
 } 
 .el-input-group,.el-input-group .el-input__inner{
  height: 50px;
 }
</style>
